<template>
	<vie class="detail">
		<view class="person">
			<view class="img"><img src="../../static/章若楠.png"></view>
			<view class="text">
				<view style="font-size:20px;font-weight:600;">橘子果酱</view>
				<view style="font-size:14px;font-weight:520;">女</view>
				<view style="font-size:14px;font-weight:520;">学号：12345</view>
			</view>
			<view class="icon"></view>
		</view>
		<view class="top">
			<view class="main">
				<view style="margin-bottom: 2px;display:flex;">
					<view style="margin-top:-2px;"> <img src="../../static/时间.png" style="width:20px;height:20px;">
					</view>{{detailData.time}}
				</view>
				<view style="display:flex;">
					<view style="margin-left:-2px;"><img src="../../static/位置.png" style="width:23px;height:23px;">
					</view>
					{{detailData.place}}
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>{{detailData.sex}}
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>{{detailData.more}}
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/关注.png" style="width:20px;height:20px;"></view>2/{{detailData.number}}&nbsp;人已参与
				</view>
			</view>

		</view>

		<view class="main">
			<view class="center">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0" style="display: flex;justify-content: space-between;">
						<input type="text" v-model="inputText" placeholder="说点什么">
						<button class="send-btn" @click="sendMessage">发送</button>
					</view>
					<view v-if="current === 1" style="display: flex;">
						<input type="text" v-model="inputText" placeholder="说点什么">
						<button class="send-btn" @click="sendMessage">发送</button>
					</view>
				</view>
				
				<scroll-view class="chat-messages" scroll-y="true">
				  <view v-for="(msg, index) in messages" :key="index" class="message-item" :class="msg.isMe ? 'sent' : 'received'">
					<image v-if="msg.isMe" class="user-avatar1"  src="../../static/首页.png" @click="goToUser"></image>
				    <image v-if="!msg.isMe" class="user-avatar" :src="currentChat.avatar"></image>
					
				    <view class="message-container">
				      <view v-if="!msg.isMe" class="sender-name">{{currentChat.sender}}</view>
					  <view v-if="msg.isMe" class="sender-name" >{{MyChat.sender}}</view>
				      <view class="message-content" :class="msg.isMe ? 'sent' : 'received'">{{msg.content}}</view>
				    
				    </view>
				    
				  </view>
				</scroll-view>
				
				
			</view>
		</view>
		
		<view class="bottom">
			<view style="margin-top: -3px;display:flex;">
				<view @click="goChat"><img src="../../static/消息.png" style="width:20px;height:20px;"></view>私聊
			</view>
			<view class="button">
				<view>我要组队</view>
			</view>
		</view>
		</view>
	</vie>

</template>

<script>
	export default {
		data() {

			return {
				 detailData: {},
				currentChat: {
				  sender: '用户A',
				  avatar: '../../static/章若楠.png'
				},
				MyChat: {
				  sender: '用户B',
				  avatar: '../../static/章若楠.png'
				},
				messages: [
				  { content: '评价一般', time: '14:30', isMe: false },
				  { content: '有什么问题吗？', time: '14:32', isMe: true }
				],
				inputText: '',
				items: ['搭帖评论', '搭子评价'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				// colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button'

			};
		},
		created() {

		},
		onLoad(options) {
		        // 使用 options 对象接收传递的参数
		        const id = options.id;
		        const time = decodeURIComponent(options.time);
		        const place = decodeURIComponent(options.place);
		        const sex = decodeURIComponent(options.sex);
				const more = decodeURIComponent(options.more);
				const number = decodeURIComponent(options.number);
		        // 根据这些参数请求详细信息或直接使用
		        this.detailData = { id, time, place,sex,more,number };
		        console.log('接收到的数据:', this.detailData);
		    },
		watch: {


		},
		mounted() {

		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			sendMessage() {
			  if (this.inputText.trim()) {
			    this.messages.push({
			      content: this.inputText,
			      time: new Date().toLocaleTimeString().slice(0,5),
			      isMe: true
			    });
			    this.inputText = '';
			  }
			},
			goChat() {
				uni.navigateTo({
					url: "/pages/chat/chat"
				})
			},

		}
	};
</script>
<style lang="scss">
	.detail {
		.person {
			width: 390px;
			height: 90px;
			// border-bottom: #a1a1a1 solid 1.5px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;

			.img {
				width: 80px;
				height: 80px;
				border-radius: 15px;

				// position: absolute;
				// left: 30px;
				// top: 5px;
				overflow: hidden;
				/* 防止图片超出盒子范围 */
			}

			.img img {
				width: 100%;
				/* 图片宽度占满父容器 */
				height: 100%;
				/* 图片高度占满父容器 */
				object-fit: cover;
				/* 保持图片比例并裁剪多余部分 */
				border-radius: 15px;
				/* 图片圆角与父容器一致 */
			}

			.text {
				width: 200px;
				height: 30px;
				background-color: #ffffff;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.top {
			width: 390px;
			height: 250px;
			background-color: #ffffff;
			padding: 30px;


			.main {
				width: 300px;
				height: 200px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}
		}

		.main {
			width: 390px;
			height: 410px;
			background-color: #ffffff;
          
			.uni-padding-wrap {
				 
				// width: 750rpx;
				padding: 0px 30px;
			}

			.content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
				height: 150px;
				text-align: center;

				input {
					width: 250px;
					height: 30px;
					border: #a1a1a1 solid 1.5px;
					margin-top: -60px;
					text-align: left;
					padding-left: 10px;
					border-radius: 10px;
					
				}
			}
		}

		.bottom {
			width: 390px;
			height: 70px;
			border-top: #636363 solid 1.5px;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.button {
				width: 100px;
				height: 40px;
				background-color: #00aaff;
				color: #fff;
				border-radius: 15px;
				text-align: center;
				line-height: 40px;
				margin-left: 80px;
			}
		}
	}
	
	.chat-messages {
		margin-top: -90px;
		height: 235px;
		overflow: auto !important;
	}
	
	.message-item {
		width: 360px;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		align-items: flex-start;
	}
	
	
	
	.message-container {
		display: flex;
		// flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width: 300px;
	
	}
	
	.sender-name {
		width: 50px;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 5rpx;
	}
	
	.message-item.received {
		justify-content: flex-start;
	}
	
	.message-item.sent {
		justify-content: flex-end;
	}
	
	.message-content {
		width: 360px;
	
		padding: 30rpx 10rpx;
		border-radius: 10rpx;
		display: inline-block;
	
	}
	
	.message-content.received {
		background-color: white;
		color: #333;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.18);
		position: relative;
	}
	
	.message-content.sent {
		background: linear-gradient(to right, #55aaff, #66bbff);
		color: white;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.message-content.received {
		background-color: white;
		color: #333;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		position: relative;
	}
	
	.message-content.sent {
		background: linear-gradient(to right, #55aaff, #66bbff);
		color: white;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.message-time {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
		text-align: center;
	}
	
	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 15rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.user-avatar1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 15rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.chat-input {
		display: flex;
		padding: 20rpx;
		background-color: white;
		border-top: 1px solid #eee;
		align-items: center;
	}
	
	.emoji-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}
	
	.input-box {
		flex: 1;
		padding: 15rpx;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	.send-btn {
		width: 60px;
		margin-top: -60px;
		margin-left: 20px;
		background: linear-gradient(to right, #55aaff, #66bbff);
		color: white;
		border-radius: 10rpx;
		padding: 0 20rpx;
		height: 35px;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		line-height: 35px;
	}
</style>